<script setup lang="ts">
import {ref} from "vue";
import {getSearch} from "@/api/more";
// import SearchArea from "@/components/search/SearchArea.vue";
// let type=ref()
let infoList = ref()
getSearch().then(res=>{
    // console.log(res)
    infoList.value = res.rows
})
</script>

<template>
<!--    <SearchArea :type="type"></SearchArea>-->
    <div>
        <div id="banner"></div>
        <div id="main">
            <div  v-for="item in infoList" :key="item.jsBusinessCode">
                <h4>{{item.jsBusinessType}}</h4>
                <div v-for="item2 in item.itemList" :key="item2.id">
                    <router-link to="">
                        <div>
                            <img src="@/assets/images/search.png" alt="">
                            <span>{{item2.title}}</span>
                        </div>
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
#banner{
    width: 375px;
    height: 160px;
    background-image: url("@/assets/images/0bc5f9e6c4b9fc5a1ec0e4a18671f2c.png");
    background-repeat: no-repeat;
    background-size: 375px 160px;
}
#main{
    width: 350px;
    margin: -70px auto 0;
    background-color: white;

    h4{
        font-size: 15px;
    }

    img{
        width: 20px;
        height: 20px;
    }

    span{
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
</style>